<template>
    <div class="course">
        <div id="course-header" class="topbox cl">
            <div class="topm cl">
                <h1 style="padding-top: 0;padding-bottom: 5px">{{course.courseName}}</h1>
                <h2>{{course.courseClass}}</h2>
                <div class="box-box">
                    <div class="sele">
                        <span class="codetext">加课码：{{course.courseCode}}</span>
                    </div>
                    <div class="sele">
                        <span class="codetext"><i class="el-icon-user-solid" />&nbsp;同学&nbsp;{{membersCount}}</span>
                    </div>
                </div>
            </div>
        </div>
        <el-menu class="course-menu" :default-active="$route.path" mode="horizontal">
            <el-menu-item class="menu-item" index="/student/course"><p style="line-height: 30px;font-size: 20px">作业</p></el-menu-item>
        </el-menu>
        <div class="homework-page">
            <div class="empty-box width980 hide" v-if="workCount === 0">
                <div class="box" style="width: 980px">
                    <h3>欢迎来到课堂！</h3>
                    <p>您的老师暂未发布作业</p>
                </div>
            </div>
            <!--有内容-->
            <div class="homework-cont width980 editor-page" v-else>
                <div class="homework-list clearfix">
                    <div class="homework-box" v-for="workDTO in workDTOs" v-bind:key="workDTO.aid">
                        <div class="announce-cont-box">
                            <div class="title clearfix">
                                <div class="work-type fl" data-time="1577328954" data-fullscore="100">
                                    <span>个人作业</span>
                                    <span>{{workDTO.assignmentStart}}</span>
                                </div>
                            </div>
                            <div class="announce-cont clearfix" style="margin-bottom: 10px; position: relative; clear: left">
                                <div class="work-new-l" style="margin-right:340px;">
                                    <h3 class="work-title"><a @click="jumpToWork(workDTO)">{{workDTO.assignmentName}}</a></h3>
                                    <div class="word">
                                        <div class="p">{{workDTO.assignmentDesc}}</div>
                                    </div>
                                </div>
                                <div class="work-new-r fl ">
                                    <a @click="jumpToWork(workDTO)" class="sc-btn" v-if="!workDTO.isHandin">上传作业</a>
                                    <a @click="jumpToWork(workDTO)" class="view-work" v-else-if="workDTO.isHandin && !workDTO.isCheck">已提交</a>
                                    <a @click="jumpToWork(workDTO)" class="view-work" v-else-if="workDTO.isHandin && !workDTO.isCheck">尚未批阅</a>

                                  <span v-else-if="workDTO.isCheck" style="position: relative;top: -50px;color: red">已批阅 分数：{{workDTO.score}}
<!--                                    <a  @click="jumpToWork(workDTOs)"  class="view-work" style="position:relative;top: 50px;right: 90px;padding:5px 10px;border-radius: 3px;color: #fff;background: #409eff">更新提交-->
<!--                                  </a>-->
                                  </span>

                                </div>
                            </div>
                            <div class="comment-new">
                                <p>截止日期：{{workDTO.assignmentEnd}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCourseById, getCourseCount, getAssignmentLinkCourse } from '../../api/require'
export default {
  data () {
    return {
      sid: '',
      course: {},
      workDTOs: [],
      membersCount: '',
      haveNoWork: true,
      workCount: ''
    }
  },
  methods: {
    jumpToWork (workDTO) {
      console.log(workDTO.aid)
      this.$router.push({ path: '/mainStudent/work', query: { sid: this.sid, aid: workDTO.aid } })
    }
  },
  created () {
    // console.log(this.$route)
    this.sid = this.$route.query.sid
    this.cid = this.$route.query.cid
    const cid = this.$route.query.cid
    // console.log('.......', this.sid)
    // console.log('............', cid)

    getCourseById(cid).then(res => {
      console.log(res)
      this.course = res.data.obj
    }).catch(err => {
      console.log(err)
    })

    getCourseCount(cid).then(res => {
      console.log(res)
      this.membersCount = res.data.obj.length
    })

    getAssignmentLinkCourse(cid, this.sid).then(res => {
      console.log('课程的作业', res)
      this.workDTOs = res.data.obj
      this.workCount = this.workDTOs.length
    }).catch(err => {
      console.log(err)
    })
  }

}
</script>

<style scoped>
    a {
        text-decoration: none;
        outline: 0;
    }
    li {
        list-style: none;
    }
    body {
        font-size: 14px;
        font-family: 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;
        background: #fff;
        color: #2d2d2d;
    }
    .course {
        margin: 0 auto;
    }
    /*.topbox, .topm .box-box, .topm .sele {*/
    /*    position: relative;*/
    /*}*/
    .topbox {
        margin: 30px auto 0;
        width: 1224px;
        background-size: cover;
        height: 200px;
        border-radius: 8px 8px 0 0;
        /*padding: 48px 0 0 40px;*/
      padding-left: 20px ;
      padding-top: 10px;
        box-sizing: border-box;
      background: url("../../assets/images/bg.png") no-repeat;
      background-size: cover;
    }
    .topm h1 {
        text-align: left;
        /*padding-top: 22px;*/
        font-size: 36px;
        color: #fff;
    }
    .topm h2 {
        text-align: left;
        font-size: 20px;
        font-family: PingFang SC;
        color: rgba(255,255,255,1);
        line-height: 28px;
        width: 600px;
    }
    .topm h1, .topm h2 {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topm .box-box {
        height: 35px;
        margin: 20px auto 0;
    }
    .topm ul li {
        margin-left: 10px;
        position: relative;
        background: rgba(255,255,255,.4);
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    .topm .sele {
        float: left;
        font-size: 15px;
        color: #fff;
        text-align: left;
        height: 24px;
        line-height: 24px;
        background-position: 100px 10px;
        background-size: 14px auto;
        cursor: pointer;
        user-select: none;
        background: rgba(255,255,255,.4);
        border-radius: 2px;
        padding: 0 10px;
        margin-right: 20px;
    }
    .topm .sele .codetext {
        font-size: 12px;
    }
    .course-menu {
        width: 1224px;
        height: 72px;
        padding: 0 4%;
        box-sizing: border-box;
        background: rgba(241,243,244,1);
        border-radius: 0 0 8px 8px;
        margin: 0 auto;
    }
    .el-menu--horizontal>.el-menu-item {
        float: left;
        height: 72px;
        line-height: 72px;
        margin: 0;
        border-bottom: 2px solid transparent;
        color: #909399;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
        border-bottom: 2px solid #409EFF;
        background-color: #fff;
        color: #303133;
    }
    .menu-item {
        margin-right: 32px;
    }
    .homework-page {
        padding-bottom: 60px;
    }
    .homework-cont {
        margin-top: 20px;
    }
    .homework-page .width980 {
        width: 1224px;
        margin-left: auto;
        margin-right: auto;
    }
    .empty-box .box {
        width: 1224px;
        height: auto;
        background: #F1F3F4;
        border-radius: 4px;
        margin-top: 42px;
        text-align: center;
        padding: 35px 0;
        margin-left: auto;
        margin-right: auto;
    }
    .empty-box .box h3 {
        font-size: 14px;
        color: #707070;
        font-weight: 400;
        margin-bottom: 5px;
    }
    .empty-box .box p {
        color: #A0A0A0;
        font-size: 14px;
        line-height: 24px;
    }
    .clearfix {
        zoom: 1;
    }
    .homework-cont .homework-list .homework-box {
        padding: 0 20px 0 40px;
        border: 1px solid #E2E6ED;
        border-radius: 8px;
        background: #FFF;
        margin-bottom: 20px;
    }
    .homework-page .homework-cont .homework-list .homework-box .announce-cont-box {
        padding: 0 30px 20px 0;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .title .work-type {
        padding: 21px 0 0;
    }
    .announce-cont-box .title .work-type {
        color: #AAA;
        font-size: 0;
        padding: 21px 0 10px;
        line-height: 30px;
        text-align: left;
    }
    .announce-cont-box .title .work-type span:first-child {
        color: #5F6368;
        background: #F1F3F4;
        padding: 3px 5px;
        border-radius: 2px;
    }
    .announce-cont-box .title .work-type span {
        font-size: 14px;
        margin-right: 15px;
        color: #5F6368;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-l {
        text-align: left;
        height: auto;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-title a {
        line-height: 38px;
        padding-bottom: 0;
    }
    .announce-cont-box .work-title a {
        display: inline-block;
        color: #3B3D45;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        padding-bottom: 5px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .announce-cont-box .announce-cont .word .p, .announce-cont-box .announce-cont .work-time {
        color: #707070;
        overflow: hidden;
        line-height: 1.8;
    }
    .homework-page .announce-cont-box .announce-cont .annex, .homework-page .announce-cont-box .announce-cont .word {
        height: auto;
        overflow: auto;
        max-height: inherit;
    }
    .announce-cont-box .announce-cont .annex {
        max-height: 110px;
        margin-top: 10px;
        overflow: hidden;
    }
    .announce-cont-box .announce-cont .annex li {
        width: 92px;
        float: left;
        text-align: center;
        height: 110px;
        margin-right: 40px;
        margin-bottom: 10px;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r {
        position: absolute;
        right: 0;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r a.sc-btn {
        background: #32BAF0;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r a.view-score, .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r a.view-work {
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #32BAF0;
        border: 1px solid #32BAF0;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r>a {
        float: right;
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #FFF;
        border-radius: 4px;
        font-size: 14px;
    }
    .comment-new {
        height: 20px;
        line-height: 20px;
    }
    .comment-new p {
        padding-right: 10px;
    }
    .comment-new a, .comment-new p {
        float: left;
        margin-right: 20px;
        color: #A0A0A0;
    }
    .comment-new p b {
        font-weight: 400;
        margin-left: 10px;
    }
</style>
